<template>
  <!--查看角色-->
  <dt-modal-info ref="infoRef" title="查看">
    <div class="flex">
      <label>功能包名称：</label>
      <div>{{ packName }}</div>
    </div>
    <div class="flex" style="margin-top: 20px">
      <label style="padding-top: 7px">所包含权限：</label>
      <div style="max-height: 500px; overflow: auto; flex: 1">
        <Tree :data="permissionData" ref="treeRef"></Tree>
      </div>
    </div>
    <dt-loading ref="loadingRef" :loading="loading"></dt-loading>
  </dt-modal-info>
</template>

<script setup>
  import { ref } from 'vue'
  import permissionMgr from '@/biz/permission'
  import dt from '@dt/dt'
  const [infoRef, treeRef] = [ref(), ref()]
  const loading = ref(false)
  const permissionData = ref([])
  let [packName, checkAuthIds] = [ref(''), ref(null)]

  function show(data) {
    packName.value = data.title
    checkAuthIds.value = data.authIds || []
    infoRef.value.show()
    getSaWebAuthList()
  }
  function getSaWebAuthList() {
    // 权限树数据
    loading.value = true
    permissionMgr
      .saWebAuthList()
      .then((res) => {
        permissionData.value = dt.tool.filterTreeArray(res, checkAuthIds.value)
        loading.value = false
      })
      .catch((err) => {
        loading.value = false
      })
  }

  defineExpose({ show })
</script>

<style scoped></style>
